<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style type="text/css">
            .grid {
                margin: auto;
                width: 530px;
                text-align: center;
            }

            .grid table {
                border-top: 1px solid #c2d89a;
                width: 100%;
                border-collapse: collapse;
            }

            .grid th,
            td {
                padding: 10;
                border: 1px dashed orange;
                height: 35px;
                line-height: 35px;
            }

            .grid th {
                background-color: orange;
            }
            .grid .book {
                padding-bottom: 10px;
                padding-top: 5px;
                background-color: #f3dcab;
            }
            .grid .total {
                height: 30px;
                line-height: 30px;
                background-color: #f3dcab;
                border-top: 1px solid #c2d89a;
            }
            [v-cloak] {
                display: none;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <div class="grid">
                <div>
                    <h1>图书管理</h1>
                    <div class="book">
                        <div>
                            <label for="id">
                                编号：
                            </label>
                            <input type="text" id="id" v-model="id" v-focus disabled="false" />
                            <label for="name">
                                名称：
                            </label>
                            <input type="text" id="name" v-model="name" />
                            <button @click="handle" :disabled="submitFlag">提交</button>
                        </div>
                    </div>
                </div>
                <div class="total">
                    <span>图书总数：</span>
                    <span v-cloak>{{total}}</span>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>名称</th>
                            <th>时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr :key="item.id" v-for="item in books">
                            <td v-cloak>{{item.id}}</td>
                            <td v-cloak>{{item.name}}</td>
                            <td v-cloak>{{item.date | format('yyyy-MM-dd')}}</td>
                            <td>
                                <a href="" @click.prevent="toEdit(item.id)">修改</a>
                                <span>|</span>
                                <a href="" @click.prevent="deleteBook(item.id)">删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <script type="text/javascript" src="./js/vue.js"></script>
        <script src="./js/axios.js"></script>
        <script type="text/javascript">
            // 设置基准路径
            axios.defaults.baseURL = 'http://localhost:3000/';
            // 添加一个响应拦截器
            axios.interceptors.response.use(
                function(res) {
                    return res.data;
                },
                function(err) {
                    // 处理响应的错误信息
                    console.log(err);
                }
            );
            var vm = new Vue({
                el: '#app',
                data: {
                    id: '',
                    name: '',
                    flag: false,
                    submitFlag: false,
                    books: []
                },
                methods: {
                    handle: async function() {
                        if (this.flag) {
                            var ret = await axios.put('books/' + this.id, {
                                name: this.name
                            });
                            if (ret.status == 200) {
                                this.queryData();
                            }
                            this.flag = false;
                        } else {
                            // 添加图书
                            var ret = await axios.post('books', {
                                name: this.name
                            });
                            console.log(ret);

                            if (ret.status == 200) {
                                this.queryData();
                            }
                        }
                        // 清空表单
                        this.id = '';
                        this.name = '';
                    },
                    toEdit: async function(id) {
                        // 禁止修改id  flag状态位用于区分编辑和添加操作
                        this.flag = true;
                        var ret = await axios.get('books/' + id);
                        this.id = ret.id;
                        this.name = ret.name;
                    },
                    deleteBook: async function(id) {
                        // 删除图书
                        var ret = await axios.delete('books/' + id);
                        if (ret.status == 200) {
                            this.queryData();
                        }
                    },
                    queryData: async function() {
                        // 调用后台接口获取图书列表数据
                        // var ret = await axios.get('books');
                        // this.books = ret.data;
                        this.books = await axios.get('books');
                    }
                },
                filters: {
                    format: function(value, arg) {
                        function dateFormat(date, format) {
                            if (typeof date === 'string') {
                                var mts = date.match(/(\/Date\((\d+)\)\/)/);
                                if (mts && mts.length >= 3) {
                                    date = parseInt(mts[2]);
                                }
                            }
                            date = new Date(date);
                            if (!date || date.toUTCString() == 'Invalid Date') {
                                return '';
                            }
                            var map = {
                                M: date.getMonth() + 1, //月份
                                d: date.getDate(), //日
                                h: date.getHours(), //小时
                                m: date.getMinutes(), //分
                                s: date.getSeconds(), //秒
                                q: Math.floor((date.getMonth() + 3) / 3), //季度
                                S: date.getMilliseconds() //毫秒
                            };

                            format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                                var v = map[t];
                                if (v !== undefined) {
                                    if (all.length > 1) {
                                        v = '0' + v;
                                        v = v.substr(v.length - 2);
                                    }
                                    return v;
                                } else if (t === 'y') {
                                    return (date.getFullYear() + '').substr(4 - all.length);
                                }
                                return all;
                            });
                            return format;
                        }
                        return dateFormat(value, arg);
                    }
                },
                directives: {
                    focus: {
                        inserted: function(el) {
                            //获取元素的焦点
                            el.focus();
                        }
                    }
                },
                computed: {
                    total: function() {
                        // 计算图书的总数
                        return this.books.length;
                    }
                },
                watch: {
                    name: async function(val) {
                        // 验证图书名称是否已经存在
                        var ret = await axios.get('/books/book/' + this.name);
                        if (ret.status == 1) {
                            // 图书名称存在
                            this.submitFlag = true;
                        } else {
                            this.submitFlag = false;
                        }
                    }
                },
                mounted: function() {
                    // 该生命周期钩子函数被触发的时候。模板已经可以使用
                    // 一般此时用于获取后台数据，然后把数据填充到模板
                    // axios.get('books').then(data => {
                    //     this.books = data.data;
                    // });
                    this.queryData();
                }
            });
        </script>
    </body>
</html>
